<template>
    <!-- 修改资料 -->

    <div>
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules" disabled
            class="borderNone">
            <el-form-item label="上级菜单" prop="parentId">
                <el-input v-model="form.parentName" class="borderNone"></el-input>
            </el-form-item>
            <el-form-item label="菜单标题" prop="title">
                <el-input v-model="form.title" class="borderNone"></el-input>
            </el-form-item>
            <el-form-item label="打开方式" prop="target">
                <el-input v-model="form.target" class="borderNone"></el-input>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType" v-if="form.menuType !== 'button'">
                <el-input v-model="form.menuTypeName" class="borderNone"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标" prop="icon" v-if="form.menuType !== 'button'" class="borderNone">
                <el-popover placement="bottom-start" :width="540" trigger="click" disabled>
                    <template #reference>
                        <el-input v-model="form.icon" placeholder="点击选择图标" class="borderNone">
                            <template #prefix>
                                <!-- <img
                                    :src="iconSrc"
                                    style="width: 16px;"
                                 /> -->
                                <el-icon>
                                    <component :is="form.icon" />
                                </el-icon>
                            </template>
                        </el-input>
                    </template>
                </el-popover>
            </el-form-item>
            <el-row>
                <el-col>
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="form.name" class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="显示排序" prop="itemIndex">
                        <el-input-number v-model="form.itemIndex" :min="0" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="路由地址" prop="path">
                        <el-input v-model="form.path" class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="路由参数" prop="routerParams" v-if="form.menuType !== 'button'">
                        <el-input v-model="form.routerParams" class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="关联接口" prop="refUrls">
                        <el-input v-model="form.refUrls" class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if='form.menuType == "menu"'>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="组件路径" prop="component">
                        <el-input v-model="form.component"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单是否隐藏" prop="hidden" label-width="120px">
                        <el-switch v-model="form.hidden" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="是否全屏显示" prop="fullpage" label-width="120px">
                        <el-switch v-model="form.fullpage" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                    <el-form-item label="是否固定" prop="affix">
                        <el-switch v-model="form.affix" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="form.menuType !== 'button'">
                    <el-form-item label="显示状态" prop="visible">
                        <el-switch v-model="form.visible" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" active-value="1" inactive-value="0" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.menuType !== 'button'">
                    <el-form-item label="菜单状态" prop="status">
                        <el-input v-model="form.statusName" class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="是否验证" prop="verifyPerm">
                        <el-switch v-model="form.verifyPerm" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="是否缓存">
                        <el-switch v-model="form.keepLive" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="button-position">
            <el-button @click="updateVisible">退 出</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import Api from '@/api/model/system'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const iconSrc = ref()
// 查看用户数据的对象
const form = ref({});

onMounted(() => {
    getData()
})
const updateVisible = () => {
    emit('updatetable')
}

//调取数据
const getData = async () => {
    let res = await Api.menu.detail.post(props.paramsData);
    if (res.code == 200) {
        form.value = res.data;
        iconSrc.value = res.data.iconPath
    } else {
        form.value = '';
    }

}


</script>

<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}
</style>

